<!-- 我的需求 -->
<template>
	<view class="order-page">
		<view class="">
			<u-tabs-swiper ref="tabs" :list="statusTabs" :current="current" @change="statusChange" inactive-color="#666666"
				:is-scroll="false" active-color="#FFAA44" :active-item-style="{color: '#333333'}"></u-tabs-swiper>
		</view>
		<swiper :style="{height:height}" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(tab , idx) in statusTabs" :key="idx">
				<demandScrollItem ref="mescrollItem" :i="idx" :index="current" :tabs="statusTabs" :height="height">
				</demandScrollItem>
			</swiper-item>
		</swiper>
		<view class="fat-btn">
			<u-button type="warning" shape="circle" @click="toDemand">
				<u-icon name="plus" size="28"></u-icon>
				<text>发布需求</text>
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		demandStatusTabs
	} from '@/common/enum.js'
	import demandScrollItem from './components/demand-scroll-item.vue'
	export default {
		components: {
			demandScrollItem
		},
		data() {
			return {
				height: '',
				statusTabs: demandStatusTabs,
				current: 0,
				swiperCurrent: 0
			}
		},
		onLoad(e) {
			this.height = uni.getSystemInfoSync().windowHeight - 44 + 'px'
			this.current = e.status || 0
			this.swiperCurrent = e.status || 0
		},
		onShow() {
			if (this.canReset) {
				let curMescroll = this.getMescroll(this.current)
				curMescroll && curMescroll.resetUpScroll()
			}
			this.canReset = true
		},
		methods: {
			// 获取指定下标的mescroll对象
			getMescroll(i) {
				let mescrollItems = this.$refs.mescrollItem;
				if (mescrollItems) {
					let item = mescrollItems[i]
					if (item) return item.mescroll
				}
				return null
			},
			statusChange(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			toDemand() {
				const userinfo = this.$store.state.vuex_userInfo
				if (userinfo.is_real) {
					this.$u.route('/pages/subpage/publish/demand')
				} else {
					this.$i.route("/pages/subpage/profile/autonym")
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.order-page {
		// height: 100vh;
	}

	.fat-btn {
		position: fixed;
		width: 100%;
		bottom: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>